<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css" type="text/css">

</head>
<body>
    <div id="app">
        <!-- 注意空格 -->
        
            <div :class="clsProp">             
                <!-- <h1>oh,no!I`m fine</h1> -->
            
            <!-- <p v-if="age===18">现在我18</p>
            <p v-else-if="age===58">我不在乎</p>
            <p v-else>归来终究还是少年</p>
            <template v-if="age===18">
                <p></p>
            </template>
            <template v-else-if="age===58">
                <p></p>
            </template>
            <template v-else>
                <p></p>
            </template> -->
            <ul>
                <li v-for="(f,index) of food">{{index+1}}-{{f.name}}-{{f.price}}</li>
                
            </ul>
            <ul>
                <li v-for="(u,key) in user">{{key}}-{{u}}</li>
            </ul>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app=new Vue({
            el:'#app',
            data:{                          
                age:18,
                food:[
                    {name:'苹果',price:8},
                    {name:'香蕉',price:5},
                    {name:'香肠',price:8},
                    {name:'辣条',price:5},
                    {name:'凤爪',price:8},
                    {name:'橙汁',price:5},
                    {name:'咖啡',price:8},
                ],
                user:{
                    username:'admin',
                    password:'123456',
                    telphone:'13378789090'
                }
                // hasColor:true,
                // hasNum:false,
                // bgColorCls:this.hasColor?'bgColorCls':'',
                // colorCls:false,
            },
            computed:{
                newMsg:function(){
                    return this.msg + "I love singing"
                },
                bgColorCls:function(){
                    return this.hasColor?'bgcolor':''
                },
                clsProp:function(){
                    return {
                        becolor:this.hasColor,
                        forecolor:this.hasNum
                    }
                },
                foodSort:function(){
                    return this.food.sort(function(a,b){
                        return a.price-b.price;
                    })
                }
            },
            filters:{                   //过滤器
                formatString:function(val){
                    return "日常爱国";
                }
            },
            methods:{                   //方法
                handleClick:function(){
                    console.log("你点击了按钮，显示了一些东西")
                },
                otherMsg:function(){
                    return this.msg+ ""
                }
            },
            mounted:function(){           //已安装
                console.log('她来了'+new Date().toLocaleString());
            },
            created:function(){            //被创造
                console.log('yalaile'+new Date().toLocaleString());
            }
        })
    </script>

</body>



</html>